<template>
	<view class="my_tram_level_warp">
		<Header leftPathType="navigateTo" leftPath="/pages/myTeam/myTeam" :title="$t('mine.team')"/>
		<view class="my_tram_level_content">
			<!-- 团队总订单金额 -->
			<view class="_content_balance">
				<view class="_content_balance_title">{{$t('mine.team.total.amount')}}</view>
				<view class="_content_balance_amount">
					<text>{{juniorSummaryObj.teamAmount || 0}}</text>
					<text style="font-size: 32rpx;margin-left: 6rpx;">USDT</text>
				</view>
				<view class="_content_balance_statistics">
					<view class="_statistics_item">
						<view class="_statistics_item_title">{{juniorSummaryObj.teamCount || 0}}</view>
						<view class="_statistics_item_amount">{{$t('mine.team.total.size')}}</view>
					</view>
					<view class="_statistics_item_fg"></view>
					<view class="_statistics_item">
						<view class="_statistics_item_title">{{juniorSummaryObj.ztCount || 0}}</view>
						<view class="_statistics_item_amount">{{$t('mine.team.zt.size')}}</view>
					</view>
					<view class="_statistics_item_fg"></view>
					<view class="_statistics_item">
						<view class="_statistics_item_title">{{juniorSummaryObj.jtCount || 0}}</view>
						<view class="_statistics_item_amount">{{$t('mine.team.jt.size')}}</view>
					</view>
				</view>
			</view>
			<!-- 直推人数 -->
			<view class="_content_number">
				<view class="_content_number_title">{{$t('mine.team.zt.size')}}（{{numberList.length}}）</view>
				<view class="_content_number_info">
					<scroll-view scroll-y="true" @scrolltolower="loadMore" :style="{'height':'calc(100vh - 644rpx)'}">
						<view class="_content_number_item" v-for="(item,index) in numberList" :key="item.id" v-if="numberList && numberList.length !==0">
							<view class="_content_number_item_top" @click="checkShow(index,item)">
								<view class="_content_number_item_info">
									<up-image :src="item.userUrl ? item.userUrl :'/static/logo.png'" width="50" height="50" bgColor="#f1f6ff00" shape="circle"></up-image>
									<view class="info_data">
										<view class="info_data_title">
											{{item.userName}}
										</view>
										<view class="info_data_email">{{$t('common.email')}}：{{item.userEmail}}</view>
										<view  class="info_data_value">
											<text>ID:{{item.userId}}</text>
											<text style="margin-left: 10rpx;">{{$t('mine.team.registration.time')}}：{{formatDate(item.ctdate)}}</text>
										</view>
									</view>
								</view>
								<up-image v-if="item.isShow" src="/static/comm/but.png" width="16" height="16" bgColor="#f1f6ff00" mode="widthFix"></up-image>
								<up-image v-else src="/static/comm/right_2.png" width="16" height="16" bgColor="#f1f6ff00" mode="widthFix"></up-image>
							</view>
							<view class="_content_number_fg" v-if="item.isShow"></view>
							<view class="_content_number_item_but" v-if="item.isShow">
								<view class="_but_item">
									<text>{{$t('mine.team.amount')}}(U)</text>
									<text class="_but_item_value">{{item.ztData.teamAmount}}</text>
								</view>
								<view class="_but_item">
									<text>{{$t('mine.team.zt.size')}}</text>
									<text class="_but_item_value">{{item.ztData.ztCount}}</text>
								</view>
								<view class="_but_item">
									<text>{{$t('mine.team.jt.size')}}</text>
									<text class="_but_item_value">{{item.ztData.jtCount}}</text>
								</view>
								<!-- <view class="_but_item">
									<text>{{$t('mine.team.size')}}</text>
									<text class="_but_item_value">{{item.ztData.totalRs}}</text>
								</view> -->
							</view>
						</view>
						<view v-else class="not_data_warp">
							<up-image src="/static/comm/not_data.png" width="200" height="90" bgColor="#f1f6ff00"></up-image>
							<view class="not_data_msg_warp">{{$t('details.historical.details.no')}}</view>
						</view>
						<view v-if="loading" style="text-align: center;">{{$t("common.loading")}}</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Header from '@/components/header_comm2.vue';
	import { getJuniorSummary,getCascadeJunior } from '@/api/team.js';
	import { formatDate } from '@/utils/index.js';
		
	export default {
		components:{Header},
		data() {
			return {
				juniorSummaryObj:{},// 团队概况
				numberList:[],
				loading:false,
				form:{
					page:1,
					pageSize:10,
					userId:0,
				}
			};
		},
		async onLoad(option) {
			const id = option.id;
			if(id && id !==0){
				this.form.userId = id;
				const data = await this.getJuniorSummaryFun(id);
				this.juniorSummaryObj = data;
				this.loadMore();
			}
		},
		mounted() {
		},
		methods: {
			formatDate,
			async checkShow(index,item){
				const status = !this.numberList[index].isShow;
				let ztData={};
				if(status){
					const data = await this.getJuniorSummaryFun(item.userId);
					ztData = data;
				}
				this.numberList[index].ztData = ztData;
				this.numberList[index].isShow = status;
			},
			
			/**
			 * 查询团队概况
			 */
			async getJuniorSummaryFun(id){
				const params={
					userId:id,
				}
				const resp = await getJuniorSummary(params);
				if(resp && resp.bizcode === 100){
					return resp.data;
				}else{
					return {};
				}
			},
			// 当滚动到底部时触发的方法
			loadMore() {
				this.loadData(); // 加载更多数据
			},
			// 加载数据的方法
			async loadData() {
			  if (this.loading) return; // 如果正在加载，则不重复加载
			  this.loading = true; // 设置加载状态为true
			  try {
				const newData = await this.fetchData(this.form.page, this.form.pageSize);
				if(newData.entitys && newData.entitys.length !==0){
					this.numberList = [...this.numberList, ...newData.entitys]; // 将新数据添加到列表中
					this.form.page++; 
				}
			  } catch (error) {
				console.error('加载数据失败:', error);
			  } finally {
				this.loading = false; // 设置加载状态为false
			  }
			},
			// 模拟获取数据的方法，实际应用中应该替换为你的数据获取逻辑，例如从服务器获取数据
			async fetchData(page, pageSize) {
				const params = {
					page,
					pageSize,
					// userId:this.form.userId,
				}
				// 消费记录
				const resp = await getCascadeJunior(params);
				if(resp && resp.bizcode === 100 && resp.data){
					return resp.data;
				}else{
					return [];
				}
			},
		}
	}
</script>

<style lang="scss">
.my_tram_level_warp{
	height: calc(100vh - 0rpx);
	overflow: hidden;
	.my_tram_level_content{
		padding: 30rpx;
		._content_balance{
			background: #265FFF;
			border-radius: 20rpx;
			padding: 30rpx;
			._content_balance_title{
				font-weight: 500;
				font-size: 26rpx;
				color: #FFFFFF;
			}
			._content_balance_amount{
				font-weight: bold;
				font-size: 60rpx;
				color: #FFFFFF;
				margin-top: 10rpx;
			}
			._content_balance_statistics{
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #EEEEEE;
				margin-top: 40rpx;
				._statistics_item{
					width: 32%;
					text-align: center;
					._statistics_item_title{
						font-weight: bold;
						font-size: 36rpx;
					}
					._statistics_item_amount{
						font-weight: 500;
						font-size: 24rpx;
						margin-top: 10rpx;
					}
				}
				._statistics_item_fg{
					width: 1rpx;
					height: 40rpx;
					border-right: 1rpx solid #FFFFFF;
				}
			}
		}
	
		._content_number{
			._content_number_title{
				font-weight: bold;
				font-size: 36rpx;
				color: #111111;
				margin: 30rpx 0 10rpx;
			}
			._content_number_info{
				height: calc(100vh - 600rpx);
				overflow: auto;
			}
			._content_number_item{
				border-radius: 20rpx;
				border: 1rpx solid #999999;
				padding: 20rpx;
				margin-top: 20rpx;
				._content_number_item_top{
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
				._content_number_item_info{
					display: flex;
					align-items: center;
				}
				.info_data{
					margin-left: 20rpx;
				}
				.info_data_title{
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
				}
				.info_data_email{
					font-size: 24rpx;
					color: #9E9E9E;
					margin-top: 10rpx;
				}
				.info_data_value{
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;
					margin-top: 10rpx;
				}
				._content_number_fg{
					width: 100%;
					height: 1rpx;
					border-top: 1rpx solid #EEEEEE;
					margin: 20rpx 0 10rpx 0;
				}
				._content_number_item_but{
					display: flex;
					flex-wrap: wrap;
					font-weight: 500;
					._but_item{
						width: 50%;
						font-size: 24rpx;
						color: #999999;
						padding-top: 10rpx;
					}
					._but_item_value{
						font-size: 26rpx;
						color: #333333;
						margin-left: 20rpx;
					}
				}
			}
		}
	}
}
</style>
